import styled from 'styled-components';
import bgBorrowCount from '@/assets/images/bg-borrow-count.png';

export const BorrowCountStyled = styled.div`
  .borrow-count {
    position: relative;
    margin: 2rem auto;
    height: 12rem;
    background-image: url(${bgBorrowCount});
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* background-size: cover; */
    img {
      width: 2.5rem;
      position: absolute;
      top: calc(50% - 2rem);
      left: calc(50% - 1.5rem);
    }

    .count-container {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .left-title {
        flex: 1;
      }
      .middle-chart {
        flex: 2;
      }
      .right-title {
        flex: 1;
      }

      .count-number {
        margin-bottom: 3rem;
        text-align: center;
        color: #fff;
        font-size: 1.4rem;
        font-weight: 550;
      }
      .count-name {
        margin-top: 3rem;
        font-weight: 550;
        text-align: center;
        color: #fff;
      }
    }

    .middle-title {
      text-align: center;
      color: #00ffff;
      font-size: 1rem;
      position: absolute;
      top: 58%;
      left: calc(50% - 2rem);
    }
  }
`;
